<template>
  <IFexHeaderMain class="home_main" :style="{ paddingTop: getTopHeight() + 'px' }">
    <template #header>
      <view class="flex_left_right" style="overflow: hidden; padding: 0 26rpx" @click="goBackFun">
        <view class="back flex_left">
          <image :src="'/static/img/car/back.png'" mode="widthFix" />
        </view>
        <view class="header-title flex_right" style="margin-left: 26rpx">确认订单</view>
      </view>
    </template>
    <view class="content">
      <view class="title">交车确认书</view>
      <view v-for="(key, index) in Object.keys(detailData)" :key="index">
        <view class="section-label">{{ detailData[key].label }}</view>
        <view class="section">
          <view v-for="(sitem, sindex) in detailData[key].dataList" :key="sindex" class="info-item">
            <view class="info-label" v-if="sitem.label">{{ sitem.label }}</view>
            <view class="info-value" v-if="sitem.value || sitem.dataList" :style="sitem.style">
              <template v-if="sitem.value">{{ sitem.value }}</template>
              <template v-else>
                <view v-for="(item, idx) in sitem.dataList" :key="idx">{{ item }}</view>
              </template>
            </view>
          </view>
        </view>
      </view>
    </view>
    <template #footer>
      <view class="contact-btn">联系销售顾问</view>
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import { getTopHeight } from '@/utils'
  import useUserInfoStore from '@/store/userInfo'

  const getUserStoreFun = (): any => {
    const userInfoStore = useUserInfoStore()
    return userInfoStore.getDetailData
  }
  const detailData = ref<any>({
    basic: {
      label: '订单基本信息',
      dataList: [
        { label: '订单编号', value: getUserStoreFun().detailNO },
        { label: '购车方式', value: getUserStoreFun().detailgcfs },
        { label: '上牌人', value: getUserStoreFun().detailspr },
        { label: '上牌人电话', value: getUserStoreFun().detailsprdh },
        { label: '上牌类型', value: getUserStoreFun().detailsplx },
        { label: '体验中心', value: getUserStoreFun().detailtxzx },
        { label: '用户中心', value: getUserStoreFun().detailyhzx },
        { label: '犹豫期到期时间', value: getUserStoreFun().detailyutime },
      ],
    },
    shop: {
      label: '商品信息',
      dataList: [
        { label: '品牌', value: getUserStoreFun().detailpp },
        { label: '商品传播名', value: getUserStoreFun().detailspcbm },
        {
          label: '商品名称', //detailspmc
          dataList: ['尚界 H5 Pro 纯电 五座 后驱 陶瓷白', '主机颜色 夜阑灰内饰颜色 19英寸低', '风阻轮毂 64.6度电池容量'],
        },
      ],
    },
    quanxi: {
      label: '已生效权益',
      dataList: [
        { label: '优惠合计', value: getUserStoreFun().detailyjhj },
        { label: '商业折扣', value: getUserStoreFun().detailsyzk1 },
        { label: '商业折扣', value: getUserStoreFun().detailsyzk2 },
      ],
    },
    noquanxi: {
      label: '待生效权益',
      dataList: [
        { label: '权益1', value: '' },
        { label: '详细说明', value: getUserStoreFun().detailqy1 },
        { label: '权益2', value: '' },
        { label: '详细说明', value: getUserStoreFun().detailqy2 },
      ],
    },
    jiaofu: {
      label: '交付信息',
      dataList: [
        { label: '上牌指标', value: getUserStoreFun().detailspzb },
        { label: '充电桩', value: getUserStoreFun().detailcjz },
      ],
    },
    hexin: {
      label: '核心条款',
      dataList: [
        { label: '', value: getUserStoreFun().detailhxtk1, style: { color: '#1c1c1c', textAlign: 'left' } },
        { label: '', value: getUserStoreFun().detailhxtk2, style: { color: '#1c1c1c', textAlign: 'left' } },
        { label: '', value: getUserStoreFun().detailhxtk3, style: { color: '#1c1c1c', textAlign: 'left' } },
        { label: '', value: getUserStoreFun().detailhxtk4, style: { color: '#1c1c1c', textAlign: 'left' } },
      ],
    },
  })
  const goBackFun = () => {
    uni.navigateBack()
  }
</script>

<style scoped lang="scss">
  .flex_left_right {
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 水平方向两端分布，可根据需求调整 */
    height: 70rpx; /* 可根据实际需求设置容器高度 */
  }

  .home_main {
    background: #f2f3f5;
  }
  .header-title {
    font-size: 32rpx;
    margin-left: 10rpx;
  }
  .content {
    padding: 20rpx;
  }
  .title {
    font-size: 42rpx;
    text-align: center;
    margin-bottom: 60rpx;
  }
  .section {
    background: #fff;
    border-radius: 32rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
  }
  .section-label {
    font-size: 30rpx;
    color: #1c1c1c;
    margin-bottom: 15rpx;
  }
  .info-item {
    display: flex;
    justify-content: space-between;
    padding: 14rpx 0;
    &:last-child {
      border-bottom: none;
    }
  }
  .info-label {
    font-size: 28rpx;
    color: #1c1c1c;
     flex-shrink: 0;
  }
  .info-value {
    font-size: 28rpx;
    color: #6a6a6a;
    text-align: right;
    line-height: 40rpx;
  }
  .contact-btn {
    text-align: center;
    padding: 20rpx 0;
    background-color: #e5e5e5;
    color: #0a59f6;
    border-radius: 50rpx;
    font-size: 30rpx;
    width: 70%;
    margin: 20rpx auto;
  }
</style>
